<template>
  <div class="tu-handle-content">
    <span
      v-for="item in visibleHandle"
      :key="item.handleName"
      :class="['tu-handle', item?.disabled ? 'tu-handle-disabled' : '']"
      :style="{
        backgroundImage: 'url(' + item.iconUrl + ')'
      }"
      @click="handleClick(item)"
    ></span>
    <el-popover
      v-if="hideHandle.length"
      class="box-item"
      title=""
      content=""
      width="auto"
      placement="bottom"
    >
      <template #reference>
        <span class="tu-handle tu-handle-more"></span>
      </template>
      <div
        v-for="item in hideHandle"
        :key="item.handleName"
        :class="['more-row', item?.disabled ? 'more-row-disabled' : '']"
        @click="handleClick(item)"
      >
        <span
          class="tu-handle"
          :style="{
            backgroundImage: 'url(' + item.iconUrl + ')'
          }"
        ></span>
        <span class="more-label">{{ item.label }}</span>
      </div>
    </el-popover>
  </div>
</template>

<script lang='ts' setup>
import { reactive } from 'vue';
import type { iconHandleType } from './HandleType';

const props = withDefaults(defineProps<{
  max?: number; // 最大显示个数
  row?: any; //当前行数据
  handleList?: iconHandleType[]
}>(), {
  max: 3,
  row: ({}),
  handleList: () => []
})

const emits = defineEmits<{
  (e: 'handleEvent', handleName: string): void
}>()

// 可见的按钮
const visibleHandle: iconHandleType[] = reactive([])
// 不可见的按钮
const hideHandle: iconHandleType[] = reactive([])
// 初始化数据
for (let i = 0; i < props.handleList.length; i++) {
  if (i < props.max) {
    if (props.handleList[i]?.disabled && typeof props.handleList[i]?.disabled === "function") {
      visibleHandle.push({
        ...props.handleList[i],
        disabled: (props.handleList[i].disabled as (<T>(row: T) => boolean))(props.row)
      })
    } else {
      visibleHandle.push(props.handleList[i])
    }
  } else {
    if (props.handleList[i]?.disabled && typeof props.handleList[i]?.disabled === "function") {
      hideHandle.push({
        ...props.handleList[i],
        disabled: (props.handleList[i].disabled as (<T>(row: T) => boolean))(props.row)
      })
    } else {
      hideHandle.push(props.handleList[i])
    }
  }
}

const handleClick = (item: iconHandleType) => {
  if (!item?.disabled) {
    emits('handleEvent', item.handleName)
  }
}

// icon 推荐尺寸 20*20
</script>

<style scoped lang='scss'>
.tu-handle-content {
  font-size: 0;
  line-height: 0;

  .tu-handle {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin: 0 4px;
    background-size: 100% 100%;
    cursor: pointer;
  }

  .tu-handle-disabled {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    cursor: not-allowed;
  }

  .tu-handle-more {
    vertical-align: middle;
    background-image: url('@/assets/icon/icon04.png');
    background-size: 100% 100%;
  }
}

.more-row {
  cursor: pointer;

  .tu-handle {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin: 0 10px 0 4px;
    background-size: 100% 100%;
  }

  .more-label {
    vertical-align: middle;
  }
}

.more-row-disabled {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  cursor: not-allowed;
}

.more-row:hover {
  background-color: rgba(153, 153, 153, 0.1);
}
</style>